<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <link rel="stylesheet" href="../../widget/components/order/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .order-bg {
        background-color: #efeff4;
      }
      /* 下边框 */
      .order-border-bottom {
        border-bottom: 1px solid #e5e5e5;
      }
      /* 占位 */
      .order-placeholder {
        height: 0.88rem;
      }
      .order-tab {
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
      }
      .van-tabs {
        height: calc(100% - 0.88rem);
      }
      .van-tab--active .order-tab {
        color: rgba(222, 42, 32, 1);
      }
      .van-tabs__line {
        width: 0.64rem !important;
        height: 0.04rem !important;
        background: rgba(237, 66, 46, 1) !important;
      }
      .van-tabs__content {
        padding-bottom: 0.2rem;
      }
      /* 订单面板 */
      .order-panel {
        margin-top: 0.2rem;
        font-size: 0.26rem;
        border-radius: 0.2rem;
      }
      .van-hairline--top-bottom {
        position: static;
      }
      .order-panel-header {
        line-height: 0.48rem;
        padding: 0.24rem 0 0 0;
      }

      /* 无订单的样式 */
      .order-no-container {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .order-no {
        text-align: center;
      }
      .order-no img {
        width: 50%;
      }
      .order-no-desc {
        padding-top: 0.2rem;
        text-align: center;
        font-size: 0.32rem;
        color: rgb(100, 100, 100);
      }
      [class*='van-hairline']::after {
        border: none !important;
      }
    </style>
  </head>
  <body>
    <!-- 订单管理 -->
    <div id="app" v-cloak>
      <!-- *********************** 头 *******************************-->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">订单</div>
            <div class="header-right">
              <!-- 此处需换成 icon -->
              <div></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间内容 -->
      <div class="page-content order-bg">
        <div class="order-placeholder"></div>
        <!-- tab切换 -->
        <van-tabs
          v-model="activeName"
          line-width="2.5rem"
          color="#1989fa"
          line-height="0.04rem"
          title-active-color="#1989fa"
          @click="tabsClick"
        >
          <van-tab
            v-for="(tab,index) in tabsList"
            :key="index"
            :name="tab.name"
          >
            <div slot="title" class="order-tab">{{tab.title}}</div>
            <!-- tab容内 -->
            <div v-if="orderData.length>0">
              <!-- 订单面板 -->
              <van-panel
                class="order-panel order-border-bottom"
                v-for="(order,index) in orderData"
                :key="index"
              >
                <div
                  slot="header"
                  class="order-border-bottom order-panel-header"
                >
                  <zl-order
                    :order="order"
                    :index="index"
                    @delete-item="deleteItem"
                  ></zl-order>
                </div>
              </van-panel>
            </div>
            <!-- 当前没有订单的时候 -->
            <div v-else class="order-no-container">
              <div class="order-no">
                <img src="./image/order/noorder.png" alt="" />
              </div>
              <p class="order-no-desc">您暂时没有订单哟~</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script src="../../widget/components/order/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Button 组件
      Vue.use(vant.Button)
      Vue.use(vant.Toast)
      Vue.use(vant.Dialog)
      new Vue({
        el: '#app',
        components: {
          'zl-order': order
        },
        data: {
          // tab切换
          activeName: '全部',
          tabsList: [
            {
              title: '全部',
              name: '全部'
            },
            {
              title: '待激活',
              name: '待激活'
            },
            {
              title: '已激活',
              name: '已激活'
            }
          ],
          // 订单数据
          orderData: []
        },
        computed: {},
        methods: {
          // 头部按钮

          goBack() {
            window.history.back(-1)
          },
          // 删除
          deleteItem(index) {
            this.orderData.splice(index, 1)
          },
          tabsClick() {
            if (this.activeName === '全部') {
              userService.getOrderList({ type: 0 }).then(res => {
                if (this.activeName !== '全部') {
                  return
                }
                this.orderData = res
              })
            }
            if (this.activeName === '待激活') {
              userService.getOrderList({ type: 1 }).then(res => {
                if (this.activeName !== '待激活') {
                  return
                }
                this.orderData = res
              })
            }
            if (this.activeName === '已激活') {
              userService.getOrderList({ type: 2 }).then(res => {
                if (this.activeName !== '已激活') {
                  return
                }
                this.orderData = res
              })
            }
          }
        },
        created() {
          userService.getOrderList({ type: 0 }).then(res => {
            this.orderData = res
          })
        },
        mounted() {}
      })
    </script>
  </body>
</html>
